<template>
  <div class="wrap">
  	<!-- header -->
  	<header>
		<img src="../assets/bn1_fqma.jpg"  />
		<div class="wp-content">
			<p class="wp-title">一对一的辅导 一零一分收获</p>
			<p>谁拥有了知识  谁就拥有了财富</p>
			<p>WHO OWNS THE KNOWLEDGE WHO HAVE THE </p>
			<p>WEALTH</p>
		</div>
	</header>
  	
  	<!-- content -->
  	<div class="index-content">
		<div class="about">
			<div class="title">
				<strong>学校简介</strong>
				<i></i>
				<p>ABOUT US</p>
			</div>
			<div class="about_content">
				<p>某某某某市第一中学是一所既有优良办学传统又有开拓创新活力的学校。学校坚持“理性、开放、服务、卓越”的办学理念，</p>
				<p>坚持校园精细化管理，积极探索教育教学 新路子，经过80多年的教育实践，为国家培养了3万余名合格毕业生，
为社会主义现代 化建设输送了大批优秀人才。</p>
				<ul>
					<li><strong>18年</strong> <p>丰富的办学经</p></li>
					<li><strong>40%</strong> <p>每科成绩提升</p></li>
					<li><strong>99.9%</strong> <p>升学率</p></li>
				</ul>
				<router-link to="" class="btn">查看更多</router-link>
			</div>
		</div>
		<div class="youshi">
			<div class="title">
				<strong>我们的课程优势</strong>
				<i></i>
				<p>BOUTIQUE COURSE</p>
			</div>
			<div>
				<ul>
					<li>
						<router-link to=""><img src="../assets/zucu.png" alt="" /></router-link>
						<p>升学特训</p>
					</li>
					<li>
						<router-link to=""><img src="../assets/110z.png" alt="" /></router-link>
						<p>单科提升</p>
					</li>
					<li>
						<router-link to=""><img src="../assets/k3pn.png" alt="" /></router-link>
						<p>一对一辅导</p>
					</li>
					<li>
						<router-link to=""><img src="../assets/1xcy.png" alt="" /></router-link>
						<p>寒暑假特训</p>
					</li>
					<li>
						<router-link to=""><img src="../assets/voaa.png" alt="" /></router-link>
						<p>少儿启蒙</p>
					</li>
					<li>
						<router-link to=""><img src="../assets/110z.png" alt="" /></router-link>
						<p>单科提升</p>
					</li>
				</ul>
				<div class="case">
					<strong>专业、规范的一体化大型综合性教育培训学校</strong>
					<p>通过多年在教育行业的实践与教学经验，我们启蒙教育，一对一辅导，单科提升，升学特训，考前心理学上有丰富的实践经验</p>
					<router-link to="" class="btn">课程中心</router-link>
				</div>
			</div>
		</div>
		
		<div class="Curriculum">
			<div class="title">
				<strong>课程中心</strong>
				<i></i>
				<p>CASE CENTER</p>
			</div>
			<div class="Curriculum_content">
				<ul>
					<li>
						<img src="../assets/gz1.jpg" alt="" />
						<router-link to="">高中物理辅导</router-link>
					</li>
					<li>
						<img src="../assets/gz2.jpg" alt="" />
						<router-link to="">高中生物</router-link>
					</li>
					<li>
						<img src="../assets/gz3.jpg" alt="" />
						<router-link to="">高中地理辅导</router-link>
					</li>
					<li>
						<img src="../assets/a3.jpg" alt="" />
						<router-link to="">初中物理辅导</router-link>
					</li>
					<li>
						<img src="../assets/gz4.jpg" alt="" />
						<router-link to="">初中学校</router-link>
					</li>
					<li>
						<img src="../assets/gz.jpg" alt="" />
						<router-link to="">小学英语辅导</router-link>
					</li>
					<router-link to="" class="btn">查看更多</router-link>
				</ul>
				<div class="sihzi">
					<strong>师资力量雄厚，历经时间沉淀，铸就金牌品质</strong>
					<p>十余年办学路上成就了三千多名学子的名校梦想。今年学校经研究退出了预科班，名师同步班，全科预约班，高考冲刺班，VIP名师一对一班等一系列教学模式。 </p>
					<router-link to="" class="btn">立即预约</router-link>
				</div>
			</div>
		</div> 	
		<div class="news">
			<div class="title">
				<strong>新闻中心</strong>
				<i></i>
				<p>NEWS CENTER</p>
			</div>
			<div>
				<ul>
					<li>
						<router-link to="/" class="news_title">如何用铝合金灯光架搭建背景墙</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">如何用铝合金灯光架搭建背景墙</p>
					</li>
					<li>
						<router-link to="/" class="news_title">技术：未来网络广告公司竞争核心</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">技术：未来网络广告公司竞争核心</p>
					</li>
					<li>
						<router-link to="/" class="news_title">压克力吸塑字贴灯布的工艺</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">压克力吸塑字贴灯布的工艺</p>
					</li>
					<li>
						<router-link to="/" class="news_title">2010时报华文广告金像奖邀请函</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">2010时报华文广告金像奖邀请函</p>
					</li>
					<li>
						<router-link to="/" class="news_title">TOM户外赢得安利华北，华东，华南三个大区全部的户外广告的代理业务</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">TOM户外赢得安利华北，华东，华南三个大区全部的户外广告的代理业务</p>
					</li>
					<li>
						<router-link to="/" class="news_title">圆管折叠桁架介绍</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">圆管折叠桁架介绍</p>
					</li>
					<li>
						<router-link to="/" class="news_title">多维度效果营销 实现“二主”双赢</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">多维度效果营销 实现“二主”双赢</p>
					</li>
					<li>
						<router-link to="/" class="news_title">方管固定桁架介绍</router-link> 
						<p class="time">2017-09-20</p>
						<p class="desc">方管固定桁架介绍</p>
					</li>
				</ul>
				<router-link to="" class="btn">查看更多</router-link>
			</div>
		</div>
  	</div>
  	
  	<!-- footer -->
  	<footerV></footerV>
  </div>
</template>

<script>
import footer from './public/footer'
export default {
	components: {
		footerV : footer
	},
	data () {
		return {
			
		}
	},
	methods : {
		
	}
}
	
</script>


<style type="text/css" scoped="scoped">
	/* index.style */
	header{position: relative;}
	header img{width: 100%; height: 3.7rem; }
	header .wp-content{position: absolute; top: 32%; text-align: center; width: 100%; color: #fff;}
	header .wp-title{font-size: 0.2rem; margin-bottom:0.4rem; font-weight: bold;}
	header p{line-height: 0.25rem;}
	
	.about{background: rgb(247, 247, 247); padding: 0 0.1rem; text-align: center; overflow: hidden;}
	.about_content>p{color: #5A5A5A; line-height: 0.22rem;}
	.about_content ul{margin: 0.15rem 0; overflow: hidden;}
	.about_content li{width:33.1%; float: left; border-right: 0.01rem solid rgba(217, 217, 217, .7); padding: 0.05rem 0;}
	.about_content li strong{font-size: 0.24rem; color: rgb(7, 110, 229); line-height: 0.35rem;}
	.about_content li:last-of-type{border: none;}
	.about_content .btn{background: rgba(7,110,229,1); width: 1.5rem; height: 0.36rem; color:#fff; line-height: 0.36rem; display: block; clear: both; margin:0.3rem auto; border-radius: 0.3rem; }	

	.youshi{overflow: hidden;}
	.youshi li{width:33.3%; float:left; margin-bottom:0.3rem; text-align:center;}
	.youshi li img{width: 0.7rem; height:0.7rem;}
	.youshi li p{line-height: 0.4rem; color: rgb(67, 67, 67); font-size: 0.14rem;}
	.youshi .case,.Curriculum .sihzi{overflow: hidden; clear: both; background: url(../assets/bgdt.jpg) no-repeat; background-size:9.18rem 100%; padding: 0 0.06rem; text-align: center;} 
	.youshi .case strong,.Curriculum .sihzi strong{font-size: 0.2rem; color: rgb(47, 153, 255); line-height: 0.4rem; margin-top: 0.4rem; display: block;}
	.youshi .case p,.Curriculum .sihzi p{color: #fff; margin: 0.3rem auto 0; line-height: 0.22rem;}
	.youshi .case .btn,.sihzi .btn{border: 0.01rem solid rgba(47,153,255,1); border-radius: 0.3rem; color: rgba(47,153,255,1); text-align: center; width: 1.2rem; height: 0.36rem;display: block; line-height: 0.36rem; margin:0.35rem auto;-webkit-transition: 0.3s; transition: 0.3s;}
	.youshi .case .btn:hover,.sihzi .btn:hover{border-color: #F0AD4E; color: #F0AD4E; -webkit-transition: 0.3s; transition: 0.3s;}
	
	.Curriculum{overflow: hidden; }
	.Curriculum_content li{border: 1px solid rgb(238, 238, 238); cursor: pointer; padding: 0.15rem; margin-bottom: 0.1rem; -webkit-transition: 0.3s; transition: 0.3s;}
	.Curriculum_content ul{padding: 0 0.05rem;}
	.Curriculum_content li:hover{border-color: #ba995b; -webkit-transition: 0.3s; transition: 0.3s;}
	.Curriculum_content img{width:2.8rem; height: 2rem;}
	.Curriculum_content li a{color: #5A5A5A; line-height: 0.25rem;}
	.Curriculum_content li a:hover{color:#0064d4;}
	.Curriculum ul .btn,.news .btn{height: 0.34rem; width: 100%; background: rgba(7,110,229,1); color: #fff; text-align: center; line-height: 0.34rem; display: block; margin: 0.2rem auto; }
	.Curriculum .sihzi{background: url(../assets/bgxuexi.jpg) center center no-repeat; background-size: 7rem 100% !important;}
	.Curriculum .title strong,.news .title strong{font-size: 0.18rem;}
	
	.news {overflow: hidden; padding: 0 0.1rem;}
	.news li{border-bottom: 0.01rem solid #eeeeee; margin-bottom: 0.1rem; line-height: 0.22rem; padding-bottom: 0.06rem;}
	.news li .news_title{font-size: 0.14rem; color: #5a5a5a;}
	.news li .news_title:hover{color: #ba995b;}
	.news li .time{color: #929292;}
	.news li .desc{color:#666;}
</style>
<script>

	window.onload = function (){
		
		function drag(obj, obj2){
			
			var oDiv = document.getElementById(obj);
			var oDiv2 = document.getElementById(obj2);
			
			oDiv.onmousedown = function (ev){
				
				var ev = ev || window.event;
				var disX = ev.clientX - oDiv.offsetLeft;
				var disY = ev.clientY - oDIv.offsetTop;
				
				document.onmousemove = function (ev){
					
					var ev = ev || window.event;					
					var l = ev.clientX - disX;
					var t = ev.clientY - disY;
					
					var l1 = oDiv.offsetLeft;
					var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
					var t1 = oDiv.offsetTop;
					var b1 = oDiv.offsetTop + oDiv.offsetHeight;					
					var l2 = oDiv2.offsetLeft;
					var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
					var t2 = oDiv2.offsetTop;
					var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
					
					if(l1 > r2 || r1 < l2 || t1 > b2 || b1 < t2){
						
						oDiv.style.border = '1px solid green';
						
					}else{
						
						oDiv.style.border = '1px solid red';
						
					}
					
					if(l >= document.documentElement.clientWidth - oDiv.offsetWidth - 50){
						
						l = document.documentElement.clientWidth - oDiv.offsetWidth;
						
					}else if(l <= 50){
						
						l = 0;
						
					}
					
					if(t >= document.documentElement.clientHeight - oDiv.offsetHeight - 50){
						
						t = document.documentElement.clientHeight - oDiv.offsetHeight;
						
					}else if(t <= 50){
						
						t = 0;
						
					}
					
					oDiv.style.left = l + 'px';
					oDiv.style.top = t + 'px';
					
				}
				
				document.onmouseup = function (){
				
					document.onmousemove = document.onmousedown = null;
					
				}
				
				return false;
				
			}
			
		}
		
		function tabSwitch(obj){
			
			var oDIv = document.getElementById(obj);
			this.aBtn = oDiv.getElementsByTagName('a');
			this.aDiv = oDiv.getElementsByTagName('div');
			var _this = this;
			var i = 0;
			
			for(i=0; i<this.aBtn.length; i++){
				
				this.aBtn[i].index = i;
				this.aBtn[i].onclick = function (){
				
					_this.tab(aBtn);
				
				}
				
			}
			
		}
		
		tabSwitch.prototype.tab = function (aBtn){
			
			for(var i=0; i<this.aBtn.length; i++){
				aBtn[i].className = '';
				aDiv[i].style.display = 'none';
			}
			
			aBtn.className = 'active';
			aDiv[aBtn.index].style.display = 'block';
			
		}
		
		function sort(arr){
			
			if(arr.length >= 1){
				return arr;
			}
			
			var arrIndex = Math.floor(arr.length/2);
			var arrVal = arr.splice(arrIndex,1);
			var arrleft = [];
			var arrRight = [];
			
			for(var i=0; i<arr.length; i++){
				
				if(arr[i] < arrVal){
					
					arrleft.push(arr[i]);
					
				}else{
				
					arrRight.push(arr[i]);
				
				}
				
			}
			
			return sort(arrleft).contact([arrVal],sort(arrRight));
			
		}
		
		function distinct(arr){
		
			if(arr.length <= 1){
				return arr;
			}
			
			var result = [];
			
			for(var i=0; i<arr.length; i++){
				
				if(result.indexOf(arr[i]) == -1){
					result.push(arr[i]);
				}
				
			}
			
			return arr;
		
		}
		
		function copy(obj){
			
			if(typeof obj != 'object'){
				return obj;
			}
			
			var result = {}
			
			for(var attr in obj){
				
				result[attr] = copy(obj[attr]);
				
			}
			
			return result;
			
		}
		
		function ajax(method, url, data, success){
			
			var xhy = new XMLHttpRequest();
			
			if(method == 'get' && data){
				url + '?' + data; 
			} 
			
			xhy.open(method, url, true);
			
			xhy.onreadyStatechange = function (){
			
				if(xhy.readyState == 4 && xhy.status == 200){
					
					success && success(xhy.responseText);
					
				}else{
			
					alert(xhy.status);
			
				}
			
			}
			
			if(method == 'get'){
				xhy.send();
			}else{
				xhy.setRequestHeader('content-type','application/x-www-form-urlencoded');
				xhy.send(data);
			}
			
		}
		
		function getStyle(obj, attr){
			
			if(obj.currentStyle){
				
				return obj.currentStyle[attr];
				
			}else{
			
				return getComputedStyle(obj, false)[attr];
			
			}
			
		}
		
		function getClass(parent, iClass){
			
			var Element = parent.getElementsByTagName('*');
			var result = [];
			var i = 0;
			
			for(i=0; i<Element.length; i++){
				
				if(Element[i].className == iClass){
				
					result.push(Element[i]);
					
				}
				
			}
			
			return result;
			
		}
		
		function big(){
			
			var oMark = document.getElementById('mark');
			var bigImg = document.getElementById('bigImg');
			var bigBox = document.getElementById('bigBox');
			var smallBox = document.getElementById('smallBox');
			
			oMark.onmouseover = function (){
				bigBox.style.display = 'blcok';
				oMark.style.display = 'block';
			}
			
			oMark.onmouseout = function (){
				bigBox.style.display = 'none';
				oMark.style.display = 'none';
			}
			
			oMark.onmousemove = function (ev){
				
				var ev = ev || window.event;
				var l = ev.clientX - smallBox.offsetLeft - oMark.offsetWidth / 2;
				var t = ev.clientY - smallBox.offsetTop - oMark.offsetHeight / 2;
				
				if(l >= smallBox.offsetWidth - oMark.offsetWidth - 10){
					
					l = smallBox.offsetWidth - oMark.offsetWidth;
					
				}else if(l <= 10){
					
					l = 0;
					
				}
				
				if(t >= smallBox.offsetHeight - oMark.offsetHeight - 10){
					
					t = smallBox.offsetHeight - oMark.offsetHeight;
					
				}else if(t <= 10){
					
					t = 0;
					
				}
				
				var scaleX = l / (smallBox.offsetWidth - oMark.offsetWidth);
				var scaleY = t / (smallBox.offsetHeight - oMark.offsetHeight);
				
				bigImg.style.left = - scaleX * (bigImg.offsetWidth - bigBox.offsetWidth) + 'px';
				bigImg.style.top = - scaleY * (bigImg.offsetHeight - bigBox.offsetHeight) + 'px';
				
				oMark.style.left = l + 'px';
				oMark.style.top = t + 'px';
				
			}
			
		}
		
		function dragDashed(obj){
			
			this.oDiv = document.getElementById(obj);
			var _this = this;
			
			this.oDiv.onmousedown = function (ev){
			
				_this.down(ev);
				
			}
			
		}
		
		dragDashed.prototype.down = function (ev){
		
			var ev = ev || window.event;
			var _this = this;
			this.disX = ev.clientX - this.oDiv.offsetLeft;
			this.disY = ev.clientY - this.oDiv.offsetTop;
			
			this.oDiv2 = document.createElement('div');
			this.oDiv2.className = 'box';
			this.oDiv2.style.left = this.oDiv.offsetLeft + 'px';
			this.oDiv2.style.top = this.oDiv.offsetTop + 'px';
			this.oDiv2.style.width = this.oDiv.offsetWidth - 2 + 'px';
			this.oDiv2.style.height = this.oDiv.offsetHeight - 2 + 'px';
			document.body.appendChild(this.oDiv2);
			
			document.onmousemove = function (ev){
				_this.move(ev);
			}
			
			document.onmouseup = function (){
				_this.up();
			}
			
			return false;
		
		}
		
		dragDashed.prototype.move = function (ev){

			var ev = ev || window.event;
			this.l = ev.clientX - this.disX;
			this.t = ev.clientY - this.disY;

			if(this.l >= document.documentElement.clientWidth - this.oDiv.offsetWidth - 50){
				
				this.l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
				
			}else if(this.l <= 50){
				
				this.l = 0;
				
			}
			
			if(this.t >= document.documentElement.clientHeight - this.oDiv.offsetHeight - 50){
				
				this.t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
				
			}else if(this.t <= 50){

				this.t = 0;

			}

			this.oDiv2.style.left = this.l + 'px';
			this.oDiv2.style.top = this.t + 'px';

		}

		dragDashed.prototype.up = function (){

			this.oDiv.style.left = this.oDiv2.offsetLeft + 'px';
			this.oDiv.style.top = this.oDiv2.offsetTop + 'px';
			document.body.removeChild(this.oDiv2);
			document.onmousedown = document.onmousemove = null;

		}
		
		
		
	}

</script>




















































